<template>
  <div class="program-detail">
    <el-descriptions class="margin-top" title="项目基本信息" :column="3" border>
      <template #extra>
        <el-icon :size="30" @click="goConfig(0)">
          <Tools />
        </el-icon>
      </template>
      <el-descriptions-item label="项目名称" label-class-name="my-label">
        xxx-项目
      </el-descriptions-item>
      <el-descriptions-item label="负责人">
        张三
      </el-descriptions-item>
      <el-descriptions-item label="启动时间">
        2022-11-29
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions class="process" title="项目进度">
      <template #extra>
        <el-icon :size="30" @click="goConfig(1)">
          <Tools />
        </el-icon>
      </template>
    </el-descriptions>
    <div class="program-process">
      <div class="charts" id="chart-line">

      </div>
      <div class="tab">
        <el-table :data="tableData">
          <el-table-column prop="time" align="center" />
          <el-table-column prop="plan_finsh_num" label="计划工作完成量" align="center" />
          <el-table-column prop="truth_finsh_num" label="实际工作完成量" align="center" />
        </el-table>
      </div>
    </div>

    <el-descriptions style="margin-top:20px;" class="process" title="人员配置">
      <template #extra>
        <el-icon :size="30" @click="goConfig(2)">
          <Tools />
        </el-icon>
      </template>
    </el-descriptions>
    <div class="program-process">
      <div class="charts" id="chart-pie">

      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import initChartLine from './echart-line'
import initChartPie from './echart-pie'
import {
  Tools
} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const { rednerLine } = initChartLine()
const { rednerPie } = initChartPie()

const router = useRouter()

onMounted(() => {
  rednerLine({
    xData: ['2022-11-01', '2022-11-02', '2022-11-03', '2022-11-04', '2022-11-05', '2022-11-06', '2022-11-07'],
    seriesData: [150, 230, 224, 218, 135, 147, 260],
    seriesData1: [220, 350, 200, 150, 168, 245, 225],
    El: document.getElementById('chart-line')
  })
  rednerPie({
    El: document.getElementById('chart-pie')
  })
})
const tableData = ref([
  {
    time: '2022/1',
    plan_finsh_num: '20',
    truth_finsh_num: '10'
  },
  {
    time: '2022/2',
    plan_finsh_num: '15',
    truth_finsh_num: '5'
  }, {
    time: '2022/3',
    plan_finsh_num: '35',
    truth_finsh_num: '30'
  }, {
    time: '2022/4',
    plan_finsh_num: '28',
    truth_finsh_num: '22'
  }
])

const goConfig = (tab) => {
  router.push({
    name: 'program-config',
    query: {
      tab,
      no: router.currentRoute.value.query.no
    }
  })
}

</script>

<style lang="less" scoped src="./program-detail.less">

</style>
